<template>
  <div>
    <labelNavigation></labelNavigation>

    <!-- 主体内容 -->
    <div class="main">
      <!-- 左侧导航区 -->
      <section class="left-each">
        <div class="top-each" v-if="refresh">
          <!-- 头像 -->
          <span class="right-photo">
            <img :src="`${ src1 + myMessage[2] }`" style="width:5rem;height:5rem;border-radius:50%;" v-if="myMessage[2]!=''"/>
            <img src="@/assets/images/profile.jpg" style="width:5rem;height:5rem;border-radius:50%;" v-if="myMessage[2]==''">
          </span>
          <!-- 右侧信息框 -->
          <div class="left-each">
            <!-- 身份信息 -->
            <span class="left-teachers">
              教师
            </span>
            <span class="left-name">
              {{myMessage[0]}}
            </span>

            <!-- 查看 -->
            <button class="left-more" @click="personal">
              查看更多
              <i class="el-icon-arrow-right" style="font-size: .75rem;"></i>
            </button>
          </div>
        </div>

        <!-- 导航栏 -->
        <button
          class="each"
          :key="index"
          @click="setIndex(index)"
          v-for="(item, index) in navigationData"
          :class="{ active: index == curIndex }"
        >
          {{ item.name }}
        </button>
      </section>

      <personalContent v-if="personalShow" @change="gets()"></personalContent> 
      <sealContent v-if="0 == curIndex"></sealContent>
    </div>

  </div>
</template>

<script>
import labelNavigation from "@/views/components/background/labelNavigation4";
import personalContent from "./personal/index";
import sealContent from "./seal/index";
import { myInfo } from "@/api/myInfoTeacher/myInfo";
import module from "@/allurlimg/img";

export default {
  components: {
    labelNavigation,
    personalContent,
    sealContent,
  },
  data() {
    return {
      src1: "",
      navigationData: [
        { name: "印章管理" },
      ],
      curIndex: 99,
      personalShow: true, // 个人信息

      refresh: true, // 局部刷新
      myMessage: [],
    };
  },

  mounted() {
    this.src1 = module.host;
    this.gets();
  },

  methods: {

    // 简介刷新
    getRefresh() {
      this.gets()
    },

    // 右侧子组件刷新
    switchDisplay(id) {
      console.log('asdasd')
      this.curIndex = 99 
      this.$nextTick(function() {
        this.curIndex = id;
      })
    },

    // 实现导航栏点击效果
    setIndex(index) {
      this.curIndex = index;
      this.personalShow = false;
    },

    share() {
      this.sharePages = !this.sharePages;
    },
    personal() {
      (this.personalShow = true), (this.curIndex = 99);
    },

    // 处理获取到的个人信息
    getData(data) {
      this.myMessage = []
      // console.log(data , 'data')
      for (const key in data) {
        // console.log(data[key])
        for (const index in data[key]) {
          this.myMessage.push(
            data[key][index]
          )
        }
        this.myMessage.push(key)
      }
      // console.log(this.myMessage, 'myMessage')
      this.refresh = false;
      this.$nextTick(function() {
        this.refresh = true
      })
    },

    // 获取个人信息
    async gets() {
      const res = await myInfo(); 
      // console.log(res,'myInfo')
      if ( res.data == undefined ) {
        this.$message.error("数据库错误请检查")
      } else if ( JSON.stringify(res.data[0])==="{}" ) {
        this.$message("数据为空")
      } else {  
        this.getData(res.data)
      }
    },
  },
}

</script>

<style scoped>
/* 主体内容 */
.main {
  display: flex;
  flex-direction: row;
  margin: 1.25rem 13.75rem;
}

/* 左侧导航区 */
.left-each {
  display: flex;
  flex-direction: column;
  width: 13.75rem;
  height: 44.375rem;
  margin: 2.5rem 1.25rem;
  background: #f5f5f5;
}

/* 信息框 */
.top-each {
  display: flex;
  flex-direction: row;
}

/* 头像 */
.top-each .right-photo {
  margin: 0.5rem;
}

/* 右侧信息框 */
.top-each .left-each {
  margin: .5rem;
  height: 5rem;
  flex-direction: column;
}

/* 身份信息 */
.left-teachers {
  font-size: .75rem;
  padding: .25rem 1rem;
  
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #7c0000;
}
/* 姓名 */
.left-name {
  font-size: .75rem;
  margin: 0.25em;
  padding: 0.125rem 0.5rem;
  border-radius: 5px;

  align-items: center;
  justify-content: center;
  background: #fff;
}

/* 查看 */
.left-more {
  font-size: .75rem;
  
  border-radius: 5px;
  border: 0px;
  display: flex;
  align-items: center;
  color: #000000;
  background: #f5f5f5;
}

/* 导航栏 */
.each {
  border: 1px solid #f7f8fa;
  padding: 1rem 2rem;
  background: #fff;
  font-size: 1rem;
}

/* 点击触发 */
.left-each .active {
  background: #7c0000;
  color: #ffffff;
}

</style>